<script>
import {listAlgorCon,deleteJob} from '@/api/algor/algorcon'
export default {
  name: "index",
  props:{
    jobStatus:{
      type:String,
      require: true,
      default:''
    },
    queryParam:{
      type:Object,
      require: true,
    },
    resetOff:{
      type:Number,
      require: true,
      default:0
    }
  },
  watch:{
    jobStatus(newVal,oldVal){
      console.log("jobStatus 变化了 由" + oldVal + "变成了 ： " + newVal)
      this.searchalgor();
    },
    resetOff(newVal,oldVal){
      this.searchalgor();
    }
  },
  created() {
    this.searchalgor();
  },
  data(){
    return{
      tableData:[],
      total:0,
      queryParams:{
        pageSize:10,
        pageNum:1
      },
      rules:{
        controlname: [
            { required: true, message: '请输入布控名称', trigger: 'blur' },
          ],
          time: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          destdata: [
            { type: 'array', required: true, message: '请至少选择一个数据库', trigger: 'change' }
          ],
          controlarea: [
            { required: true, message: '请输入通道名称', trigger: 'blur' },
          ],
          interval: [
            { required: true, message: '请输入间隔时间', trigger: 'blur' },
          ],
          alarmmaxnum: [
            { required: true, message: '请输入最大报警次数', trigger: 'blur' },
          ],
          skip: [
            { required: true, message: '请输入跳帧', trigger: 'blur' },
          ],
          controltype: [
            { type: 'array',required: true, message: '请选择算法类型', trigger: 'change' }
          ],
          warnlevel: [
            { required: true, message: '请选择告警级别', trigger: 'change' }
          ],

      },
      EditFormdialogVisible:false,
      DeleteFormdialogVisible:false,
      controltype: [],
      EditForm:{
      },
      formLabelWidth:'121px',
      currentPage:1,
      active:1,
      picsrc:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },
  methods:{
    searchalgor(){
      let status = '';
      if ('stop' == this.jobStatus){
        status = 1;
      }
      if ('ing' == this.jobStatus){
        status = 0;
      }
      this.queryParam.jobStatus = status;
      listAlgorCon(this.queryParam).then(resp=>{
        console.log(resp)
        this.tableData = resp.rows;
        this.total = resp.total;
      })
    },

    handleEdit(row){
      console.log(row)
      this.$emit('update-row',row)
    },
    handleDelete(row){
      this.$model.confirm('是否确认删除布控名为"' + row.jobName + '"的数据项？').then(function() {
        return deleteJob(row.channelKey);
      }).then(() => {
        this.searchalgor();
        this.$model.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 2) this.active = 1
    },
     // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1
    },
  },
}
</script>

<template>
  <div>
    <el-row type="flex" justify="center">
      <!-- 标签列表 -->
      <el-col :span="22">
        <div class="mytable">
          <el-table height="430" :data="tableData" class="tabletab" header-cell-class-name="table_header" stripe>
            <el-table-column label="布控名称" prop="jobName"></el-table-column>
            <el-table-column label="状态" prop="jobStatus">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.jobStatus == 'running'" type="success">布控中</el-tag>
                <el-tag v-else type="danger">已暂停</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="布控设备" prop="deviceName"></el-table-column>
            <el-table-column label="布控阈值" prop="threshold"></el-table-column>
            <el-table-column label="算法类型" prop="algorName"></el-table-column>
            <el-table-column label="告警级别" prop="warnlevel">
              <template slot-scope="scope">
                <span>
                  <img src="@/assets/ptz/warnlevel.png" style="margin-right: 5px;margin-bottom: 3px;width: 13px;height: 13px;vertical-align:middle">
                  {{ scope.row.warnlevel }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="operate">
              <template slot-scope="scope">
<!--                <el-button type="text" size="mini" @click="handleEdit(scope.row)"><i class="el-icon-edit" style="margin-right: 6px"></i>修改</el-button>-->
                <el-button type="text" size="mini" @click="handleDelete(scope.row)" ><i class="el-icon-delete" style="margin-right: 6px"></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row>
      <el-col :span="8" :offset="15">
        <div>
          <pagination
          class="pager"
              v-show="total>0"
              :total="total"
              :page.sync="queryParam.pageNum"
              :limit.sync="queryParam.pageSize"
              @pagination="searchalgor"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.bread /deep/ .el-breadcrumb__inner{
  color: #f2f2f2;
}
.bread /deep/ .el-breadcrumb__inner:hover{color: #f2f2f2;}
/* .el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
} */
 .el-button{
  /* color:#ffffff */
 }
.el-row{
  margin-top: 20px;
  /* margin-bottom:20px; */
}
.el-input{
  width:250px;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  border:1px solid #B1B4C5;
}
.inputem /deep/ .el-input__inner:focus{
  border:2px solid #4c87c2;
}
.inputem /deep/ .el-input__inner:hover{
  border:2px solid #4c87c2;
}

.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}
.el-icon-search{
  color: #ffffff;
}
/* .tabletab /deep/ .el-table__header-wrapper{
  background-color: #131627;
  font-family: "微软雅黑";
  font-size: 14px;
} */


/*.tabletab /deep/ .el-table__row{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/
/* */
/*.tabletab /deep/ .el-table__body-wrapper{*/
/*  background-color: #131627;*/
/*  font-family: "微软雅黑";*/
/*  font-size: 14px;*/
/*}*/

/*::v-deep .cell{*/
/*  color:#ffffff;*/
/*}*/
/*::v-deep.el-table tbody tr:hover > td {*/
/*    background-color: #2b3b5256 !important;*/

/*    }*/
/* .tabletab /deep/ .table_header{*/
/*  background-color: #2b3b52 !important;*/
/* }*/
/* .mytable /deep/ .el-table__row>td{*/
/*  !* 去除表格线 *!*/
/*  border-bottom:1px solid #2B3B52;*/
/*}*/
/*.mytable /deep/ .el-table th.is-leaf {*/
/*  !* 去除上边框 *!*/
/*    border: none;*/
/*}*/
/*::v-deep .el-table::before{*/
/*  !* 去除下边框 *!*/
/*  !* height: 0; *!*/
/*  background-color: #2B3B52;*/
/*  height: 2px;*/
/*  !* border: 1px solid #2B3B52; *!*/
/*}*/
/*.stepbox1, .stepbox2, stepbox3{*/
/*  margin-top: 30px;*/
/*  height: 250px;*/
/*}*/
/*.mytable /deep/ .el-table th.el-table__cell{*/
/*  background-color: #2b3b52;*/
/*}*/
</style>
